<template>
	<div class="DataBank">
		<databank-header :name='hearderName'></databank-header>
		<div class="main">
			<div class="checkSeason">
				<span>选择赛季</span>
				<div class="checkSeasonBox">
					<p @click='checkSeasonShow=!checkSeasonShow'>{{ currentSeasonTxt }}赛季</p>
					<div class="ul-box"  v-show='checkSeasonShow'>
						<ul>
							<li 
								v-for='(item,index) in LeagueSeasonList' :key="index"
								@click = 'checkcurrentSeason(item.tournament_stage_id,item.season,item.tournament)'
							>
								{{ item.season }}赛季
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="nav">
				<div class="navTop">
					<span :class="active==1?'hover':''" @click='active=1'>图文</span>
					<span :class="active==2?'hover':''" @click='active=2'>积分</span>
					<span :class="active==3?'hover':''" @click='active=3'>射手榜</span>
				</div>
				<div class="navCon">
					<div v-show='active==1' class="navCon-box tuwen">
						<template v-if='currentSchedule'>
							<p class="inprogress" v-show='inprogress !=""'><b>正赛</b><span>(进行到第  {{ inprogress }}  轮)</span></p>
							<div class="navCon-box-block">
								<span 
									v-for='(item,index1) in LeagueScheduleList.group' :key="index1"
									:class="item==currentSchedule?'hover':''"
									@click='currentSchedule = item'
								>{{ item }}</span>
							</div>
							<div class="navCon-box-table">
								<table>
									<tr>
										<th>时间</th>
										<th>主队</th>
										<th>比分</th>
										<th>客队</th>
										<th>半场</th>
										<th></th>
									</tr>
									<tr 
										v-for='(item,index2) in LeagueScheduleList[currentSchedule]' :key="index2"
										@click='goDeatil(item.mid)'
										
									>
										<td>{{ item.mt }}</td>
										<td>{{ item.hz}}</td>
										<td class="redColor fontWeb">{{ item.hm_fs+':'+item.aw_fs }}</td>
										<td>{{ item.az  }}</td>
										<td class="blueColor fontWeb">{{ item.hm_hs+':'+item.aw_hs }}</td>
										<td><span class="iconfont godeatil">&#xe606;</span></td>
									</tr>
								</table>
							</div>
						</template>
						<div v-else class="noData">暂无数据！</div>
						
					</div>
					<div v-show='active==2' class="navCon-box jifen">
						<template v-if='LeagueRankByStageState'>
							<template v-if='LeagueRankByStage.isCup'>
								<div class="isCup-box" v-for='(value,key) in LeagueRankByStage.ranklist' :key="key">
									<p class="isCup-box-top" @click='isCupShowList[key] = !isCupShowList[key]'>{{ key }}<span :class='{"icon-up":!isCupShowList[key]}'></span></p>
									<div class="navCon-box-table" v-show='isCupShowList[key]'>
										<table >
											<tr>
												<th>排名</th>
												<th>球队</th>
												<th>胜</th>
												<th>平</th>
												<th>负</th>
												<th>得</th>
												<th>失</th>
												<th>净</th>
												<th>积分</th>
											</tr>
											<tr v-for='(item,index3) in value' :key="index3">
												<td><span class="GoalRankListBlock top">{{ index3+1 }}</span></td>
												<td>{{ item.name?item.name:'-' }}</td>
												<td>{{ item.win?item.win:'-' }}</td>
												<td>{{ item.draw?item.draw:'-' }}</td>
												<td>{{ item.lose?item.lose:'-' }}</td>
												<td>{{ item.goal?item.goal:'-' }}</td>
												<td>{{ item.losegoal?item.losegoal:'-' }}</td>
												<td>{{ item.goaldiff?item.goaldiff:'-' }}</td>
												<td>{{ item.point?item.point:'-' }}</td>
											</tr>
										</table>
									</div>
								</div>
							</template>
							<template v-else>
								<div class="isCup-box">
									<div class="navCon-box-table">
										<table >
											<tr>
												<th>排名</th>
												<th>球队</th>
												<th>胜</th>
												<th>平</th>
												<th>负</th>
												<th>得</th>
												<th>失</th>
												<th>净</th>
												<th>积分</th>
											</tr>
											<tr  v-for='(item,index4) in LeagueRankByStage.ranklist' :key="index4">
												<td><span class="GoalRankListBlock top">{{ index4+1 }}</span></td>
												<td>{{ item.name?item.name:'-' }}</td>
												<td>{{ item.win?item.win:'-' }}</td>
												<td>{{ item.draw?item.draw:'-' }}</td>
												<td>{{ item.lose?item.lose:'-' }}</td>
												<td>{{ item.goal?item.goal:'-' }}</td>
												<td>{{ item.losegoal?item.losegoal:'-' }}</td>
												<td>{{ item.goaldiff?item.goaldiff:'-' }}</td>
												<td>{{ item.point?item.point:'-' }}</td>
											</tr>
										</table>
									</div>
								</div>
							</template>
						</template>
						<div v-else class="noData">暂无数据！</div>
					</div>
					<div v-show='active==3' class="navCon-box sheshoubang">
						<div class="navCon-box-table" v-if='GoalRankList.length > 0'>
							<table >
								<tr>
									<th>排名</th>
									<th>球员</th>
									<th>球队</th>
									<th>进球</th>
								</tr>
								<tr 
									v-for='(item,index5) in GoalRankList' :key="index5"
									
								>
									<td><span :class="index5<3?'GoalRankListBlock top':'GoalRankListBlock' ">{{ index5+1 }}</span></td>
									<td>{{ item.name}}</td>
									<td>{{ item.team }}</td>
									<td class="redColor fontWeb">{{ item.goal  }}<SPAN v-if='item.penalty'>({{ item.penalty }})</SPAN></td>
								</tr>
							</table>
						</div>
						<div v-else class="noData">暂无数据！</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
</template>
<script>
import databankHeader from './components/Header'
import axios from 'axios'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'DataBankDeatil',
	components:{
		databankHeader,
	},
	data:function(){
		return {
			LeagueSeasonList:[],
			LeagueScheduleList:{},
			LeagueRankByStage:{},
			GoalRankList:[],
			isCupShowList:{},
			checkSeasonShow:false,
			LeagueRankByStageState:true,
			hearderName:'',
			currentleagueId:'',
			currentSeasonTxt:'',
			currentSchedule:'',
			inprogress:'',
			active:1,
		}
	},
	methods:{
        //获取该国家赛季列表
        getLeagueSeasonList:function(id){ 
			var t = this;
          	axios.get('/api/getLeagueSeason.php?leagueId='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.LeagueSeasonList = data
			            t.currentSeasonTxt = data[0].season;
			            t.getLeagueScheduleList(data[0].tournament_stage_id)
			            t.getGoalRankList(data[0].tournament)
			            t.getLeagueRankByStage(data[0].tournament)
			       }
	            })
            	.catch(function (error) {
	               Toast(error);
	            });
        },
        //获取该赛季比赛的图文详情
        getLeagueScheduleList:function(id) { 
        	Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this;
          	axios.get('/api/getLeagueSchedule.php?tournament_stage_id='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.LeagueScheduleList = data
			            t.inprogress = data.inprogress
			            t.currentSchedule = data.group[0]
			            Indicator.close();
			            if (data.group.length == 0) {
			            	Toast('没有数据');
			            }
			       }
	            })
            	.catch(function (error) {
	                Toast(error);
	            });
        },
        //获取该赛季比赛的积分详情
        getLeagueRankByStage(id){
        	Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this;
          	axios.get('/api/getLeagueRankByStage.php?tournamentId='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data;
			            //每个小组的显示状态
			            let isCupShowListState=new Object();
			            if (data.isCup) {
			            	for(var key in data.ranklist){
			            		isCupShowListState[key]=true;
			            	}
			            }
			            //积分是否有数据
			            if (data.ranklist.length == 0 ) {
			            	t.LeagueRankByStageState = false
			            }else{
			            	t.LeagueRankByStageState = true
			            }
			            t.LeagueRankByStage = data;
			            t.isCupShowList = isCupShowListState
			            Indicator.close();
			            if (!data.ranklist) {
			            	Toast('没有数据');
			            }

			       }
	            })
            	.catch(function (error) {
	                Toast(error);
	            });
        },
        //获取该赛季比赛的射手榜详情
        getGoalRankList(id){
        	Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
        	var t = this;
          	axios.get('/api/getGoalRank.php?tournamentId='+id)
	            .then(function(res) {
	            	res = res.data
			        if (res.status == 0 && res.data) {
			            const data =  res.data
			            t.GoalRankList = data
			            Indicator.close();
			       }
	            })
            	.catch(function (error) {
	                Toast(error);
	            });
        },
        checkcurrentSeason(seasonID,seasonTxt,goalID){
        	this.getLeagueScheduleList(seasonID)
        	this.getGoalRankList(goalID)
        	this.getLeagueRankByStage(goalID)
        	this.currentSeasonTxt = seasonTxt;
        	this.checkSeasonShow = false;
        	// console.log(seasonID,seasonTxt,goalID)
        },
        isCupShow(event){
        	var t = event.target;
        	var icon = t.getElementsByTagName('span');
        	var siblings = t.nextElementSibling
        	if (icon.className == 'icon-up') {
        		icon.className = '';
        		siblings.style.block = 'block'
        	}else{
        		icon.className = 'icon-up';
        		siblings.style.block = 'none'
        	}
        	console.log(icon);
        },
	    //跳转到赛事详情
	    goDeatil(id){
	    	this.$router.push('/Deatil/'+id)
	    },
	},
	created () {
		const t = this;
		const id = t.$route.params.id
		const title =  t.$route.params.title
		this.hearderName = title
      	this.getLeagueSeasonList(id);

	},
};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
	.main{
		padding-top: @hearderHig;
	}
	.ul-icon{
		transform: rotate(180deg);
	}
	.checkSeason{
		background:#fff;
		height: .8rem;
		line-height: .8rem;
		padding:0 .25rem;
		border-bottom: 1px #E0E0E0 solid;
		color: #4E4E4E;
		display: flex;
		span{
			flex: 1;
		}
		.checkSeasonBox{
			flex: 4;
			position:relative;
			.ul-box{
				height: 5rem;
				overflow: auto;
				position:absolute;
				width: 100%;
				left: 0;
				top: .85rem;
			}
			ul{
				background:#E0E0E0;
				
				li{
					letter-spacing: 2px;
					padding:0 .15rem;
					border-bottom: 1px #c6c6c6 solid;
					color: @grayColor;
				}
			}
			
		}
	}
	.navTop{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		color: #4F4F4F;
		span{
			flex: 1;
			text-align: center;
			padding:.18rem 0;
			border-bottom:1px #E0E0E0  solid;
			margin: 0;
			&.hover{
				padding-bottom: 0.14rem;
				border-bottom:0.04rem @greenColor1 solid;
				font-weight: 600;
			}
		}
	}
	.inprogress{
		text-align: center;
	    font-size: 14px;
	    color: #999;
	    height: 14px;
	    line-height: 14px;
	    padding: 15px 0 5px;
	    background:#F5F8FB;
	    b{
	    	color: #333;
	    }
	}
	.navCon-box-block{
		padding:.25rem .25rem 0.1rem;
		background:#F5F8FB;
	}
	.navCon-box-block span{
		display: inline-block;
		height: .58rem;
		background:#fff;
		text-align: center;
		line-height: .58rem;
		padding:1px 10px;
		margin:0 .05rem 0.15rem 0.05rem;
		color: @grayColor;
		&.hover{
			color: @greenColor1;
			border:1px @greenColor1 solid;
			padding:0 9px;
		}
	}
	.GoalRankListBlock{
		display: block;
		width: .36rem;
		height: .36rem;
		margin:auto;
		text-align: center;
		line-height: .36rem;
		color: @greenColor1;
		border:1px @greenColor1 solid;
		&.top{
			color: #fff;
			background:@greenColor1;
		}
	}
	.isCup-box-top{
		padding: .3rem .2rem .2rem;
		text-align: center;
		font-weight: bold;
		span{
			float: right;
			display: block;
			width: 1px;
			height: 1px;
			border:5px solid;
			border-color:#333 transparent transparent transparent;
			&.icon-up{
				transform: rotate(180deg);
			}
		}
	}
	.godeatil{
		font-size: .14rem;
		padding:0 .1rem;
	}
	.isCup-box{
		border-top:0.11rem #f5f8fb solid
	}
	.isCup-box .navCon-box-table table{
		border-top:1px #DFE1E3 solid
	}
	.isCup-box .navCon-box-table table th{
		font-weight: normal;
	}
	.sheshoubang .navCon-box-table{
		border-top:0.11rem #f5f8fb solid
	}
</style>
